<template>
  <el-table class="table" :data="state.tableData" style="width: 100%">
    <el-table-column align="center" prop="id" label="id" />
    <el-table-column align="center" prop="username" label="用户名" />
    <el-table-column align="center" prop="mobile" label="电话" />
    <el-table-column align="center" fixed="right" label="操作">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleClick(scope.row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
// import tools from '@/utils/tools.js'
import { ref, computed, reactive, getCurrentInstance, onMounted } from "vue";
import {
  getAllUser,
  deleteUser
} from "@/api";
const state = reactive({
  tableData: [],
});
onMounted(() => {
  getUser()
})
const getUser = () => {
      getAllUser().then(res => {
        if(res.status=='200'&&res.data) {
            state.tableData = res.data.data
        }
        console.log(res,'所有用户')
    })
}
const handleClick = (v) => {
  deleteUser(v).then(res => {
    getUser()
  })
}
</script>
<style lang='scss' scoped>
.table {
    margin-top: 10px;
}
</style>
